<template>
	<div class="send-message-wrapper flex column">
		<div class="top-title flex center">
			<span>用户发送消息给公众号</span>
			<div class="Flex"></div>
			<span class="top-tips">用户发包含关键字的消息到公众号，就会收到相应的自动回复</span>
			<Button @click="addKeyword" type="primary">添加关键字</Button>
		</div>
		<div ref="tableContent" class="table-content Flex">
			<Spin fix v-show="spinShow"></Spin>
            <Table :height="tableHeight" :columns="columns" :data="tableData">
                <div slot="footer">
                    <Row type="flex" justify="center" align="middle">
                        <Page :total="totalPage" :page-size=20 :current="page" @on-change="changePage" show-elevator></Page>
                    </Row>
                </div>
            </Table>
        </div>
	</div>
</template>

<script>	
	import { getKeywordReplyList,keywordReplyDel } from "api/wechatSetting"
	export default {
        data () {
            return {
				spinShow: false,
				tableHeight: 0,
				totalPage: 20,
				page: 1,
				columns: [
					{
                        title: '关键字',
                        key: 'receive_keyword'
                    },
                    {
                        title: '类型',
						key: 'reply_type',
						 render: (h, params) => {
                            return h('div', [
								h('span', {
									style: {
										fontSize: "12px",
										background: "#bdbdbd",
										padding: "5px 6px"
									}
								}, params.row.reply_type=="text"?"文本信息":"小程序卡片")
							]);
                        }
                    },
                    {
                        title: '内容',
                        key: 'content'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'right',
                        render: (h, params) => {
                            return h('div', [
								h('Button', {
									props: {
										size: 'small',
										type: 'primary'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.$router.push("/mall/wechatSetting/keywordResponseList/"+params.row.plugin_custom_reply_id);	
										}
									}
								}, '编辑'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.$Modal.confirm({
												title: '提示',
												content: "确定要删除该关键字吗？",
												onOk: () => {
													this.spinShow = true;
													keywordReplyDel({plugin_custom_reply_id: params.row.plugin_custom_reply_id}).then(_res=>{
														this.spinShow = false;
														this.getData();
														this.$Message.success("删除成功");
													}).catch(err=>{
														this.spinShow = false;
														this.$Message.error(err.message);	
													})
												}
											});
										}
									}
								}, '删除')
							]);
                        }
                    }
				],
				tableData:[]
			}
        },
        methods: {
			// 获取数据
			getData(page) {
				getKeywordReplyList({page: page}).then(_res=>{
					this.spinShow = false;
					this.tableData = _res.data.data;
					if (page == 1) {
						this.totalPage = _res.data.total;
					}
					if (page == 1) {
						if (window.localStorage) {
							// 小程序appid
							window.localStorage.setItem("wechat_app_id", _res.wechat_app_id);
							// 预览logo
							window.localStorage.setItem("logo", _res.logo);
							// 纯文本
							window.localStorage.setItem("remind_image_text", _res.remind_image_text);
							// 小程序卡片
							window.localStorage.setItem("remind_image_miniprogram", _res.remind_image_miniprogram);
						} else {
							// 小程序appid
							this.setCookie("wechat_app_id",_res.wechat_app_id,1);
							// 预览logo
							this.setCookie("logo",_res.logo,1);
							// 纯文本
							this.setCookie("remind_image_text",_res.remind_image_text,1);
							// 小程序卡片
							this.setCookie("remind_image_miniprogram",_res.remind_image_miniprogram,1);
						}
					}
				}).catch(err=>{
					this.spinShow = false;
					this.$Message.error(err.message);
				})
			},
			
			// 添加关键字
			addKeyword() {
				this.$router.push("/mall/wechatSetting/keywordResponseList/-1");	
			},

			// 点击页码事件
            changePage(page) {
                this.getData(page);
			},
			
			setCookie(c_name,value,expiredays) {
				var exdate=new Date()
				exdate.setDate(exdate.getDate()+expiredays)
				document.cookie=c_name+ "=" +escape(value)+
				((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
			}

        },
        created() {
			this.getData(1);
		},
		mounted() {
            this.$nextTick(function () {
                this.tableHeight = this.$refs.tableContent.offsetHeight;
            })
        },
        components: {
		}
     }
</script>

<style scoped>
	.send-message-wrapper {
		background: white;
		margin: 12px 20px 12px 12px;
		padding: 20px;
		padding-bottom: 0;
		font-size: 14px;
        height: calc(100vh - 88px);     
	}
	.top-title {
		background: #f5f7f9;
		color: black;
		padding: 10px 20px;
		font-size: 14px;
		margin-bottom: 20px;
	}
	.top-title .top-tips {
		font-size: 12px;
		color: #666666;
		margin-right: 50px;
	}
	.table-content {
		position: relative;
	}
	
</style>
<style type="text/css">
 .send-message-wrapper .ivu-table td.log-content {
	padding: 16px 0;
}
.send-message-wrapper .ivu-table-title {
	border-bottom: 1px solid #eeeeee;
}

.send-message-wrapper .ivu-table:before {
	display: none!important;
	background-color: transparent!important;
} 

.send-message-wrapper .ivu-table:after {
	width: 0!important;
	height: 100%!important;
	background: transparent!important;
	display: none!important;
}

.send-message-wrapper .ivu-table-wrapper {
	border: none!important;
}

.send-message-wrapper tr span {
	font-size: 12px!important;
}

.send-message-wrapper .ivu-table-cell {
	padding-left: 18px!important;
}

/* 导航栏颜色 */
.send-message-wrapper .ivu-table-header {
	background: white !important;
}
/* .ivu-table-header .ivu-table th, .ivu-table td {
	border-bottom: 1px solid #e8eaec;
} */
</style>
